<template>
  <div>
    <h1>套餐 SKU 选择系统</h1>
    <div class="package-list">
      <PackageCard v-for="packageData in packages" :key="packageData.model" :package-data="packageData"
        :is-selected="selectedPackage && selectedPackage.model === packageData.model"
        @package-selected="handlePackageSelected" />
    </div>
    <SkuSelector v-if="selectedPackage" :selected-package="selectedPackage" @price-updated="handlePriceUpdated"
      @sku-selected="handleSkuSelected" />
    <PriceCalculator v-if="selectedPackage" :package-price="selectedPackage.price" :sku-add-price="skuAddPrice"
      :total-price="totalPrice" />
    <ContractGenerator v-if="selectedPackage" :selected-package="selectedPackage" :selected-skus="selectedSkus"
      :total-price="totalPrice" />
  </div>
</template>

<script>
import PackageCard from '@/components/PackageCard.vue';
import SkuSelector from '@/components/SkuSelector.vue';
import PriceCalculator from '@/components/PriceCalculator.vue';
import ContractGenerator from '@/components/ContractGenerator.vue';

export default {
  components: {
    PackageCard,
    SkuSelector,
    PriceCalculator,
    ContractGenerator
  },
  data() {
    return {
      packages: [
        {
          name: 'Apex C350',
          model: 'Apex C350',
          price: 10300,
          skus: {
            cpu: {
              'i7': { name: 'Intel i7', price: 1000 },
              'i9': { name: 'Intel i9', price: 2000 }
            },
            memory: {
              '16g': { name: '16GB', price: 500 },
              '32g': { name: '32GB', price: 1000 }
            }
          }
        },
        {
          name: 'Apex Z350',
          model: 'Apex Z350',
          price: 10300,
          skus: {
            cpu: {
              'ryzen7': { name: 'AMD Ryzen 7', price: 1200 },
              'ryzen9': { name: 'AMD Ryzen 9', price: 2200 }
            },
            memory: {
              '16g': { name: '16GB', price: 500 },
              '32g': { name: '32GB', price: 1000 }
            }
          }
        }
      ],
      selectedPackage: null,
      skuAddPrice: 0,
      totalPrice: 0,
      selectedSkus: {}
    };
  },
  methods: {
    handlePackageSelected(packageData) {
      this.selectedPackage = packageData;
      this.skuAddPrice = 0;
      this.totalPrice = packageData.price;
      this.selectedSkus = {};
    },
    handlePriceUpdated(newPrice) {
      this.totalPrice = newPrice;
    },
    handleSkuSelected(skus) {
      this.selectedSkus = skus;
    }
  }
};
</script>

<style scoped>
.package-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
</style>